<template>
    <div class="notification">
        <div class="backgrounds">
            <div @click.stop="CancelLogin" class="nav">
                <div class="nav-inner">
                    <ul class="nav-menu clearfix">
                        <li @click="Jump" style="display: inline-flex;">
                            <img style="width: 48px;height: 48px;margin-top: 8px;" src="../assets/logo/logo.png" alt="">
                            <div>成都市政务云监管平台</div>
                        </li>
                        <li>
                            <a style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                border-bottom: 4px solid #fff;
                                "
                            href="/#/Notification">官网公告</a>
                        </li>
                        <li @click="Jumps('help')">
                            <a href="/#/help" style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            >帮助与支持</a>
                        </li>
                        <li @click="Jumps('ResourceCalculator')">
                            <a href="/#/ResourceCalculator" style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            >资源计算器</a>
                        </li>

                    </ul>
                    <ul class="nav-login clearfix">
                        <li @click.stop="chengeState">
                            <div class="home-button">登录</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div @click.stop="CancelLogin" class="carousel-inner">
                <div class="box">
                    <img src="../assets/icons/banner.jpg" alt="" />
                </div>
            </div>
            <div  @click.stop="CancelLogin" class="notice">
                <div class="content">
                    <div class="container-fluid">
                        <div class="col-md-4">
                            <div class="container-fluid">
                                <div
                                    @click="ChangeType(1)"
                                    :style="
                                        type == 1
                                            ? 'border: none;border-top: 4px solid rgb(37,164,246);color: rgb(37,164,246);font-weight: bold;'
                                            : ''
                                    "
                                >
                                    普通公告
                                </div>
                                <div
                                    @click="ChangeType(2)"
                                    :style="
                                        type == 2
                                            ? 'border: none;border-top: 4px solid rgb(37,164,246);color: rgb(37,164,246);font-weight: bold;'
                                            : ''
                                    "
                                >
                                    安全情报
                                </div>
                            </div>
                            <div class="leftContent">
                                <ul class="list" v-if="type == 1">
                                    <li
                                        @click="ChangeActive(item)"
                                        v-for="(item, index) in notice"
                                        :key="index"
                                    >
                                        <i
                                            :style="
                                                item.noticeId == active
                                                    ? '    background-color: #F68920;'
                                                    : ''
                                            "
                                        ></i>
                                        <span
                                            :style="
                                                item.noticeId == active
                                                    ? ' color: #F68920;'
                                                    : ''
                                            "
                                            >{{ item.noticeTitle }}</span
                                        >
                                    </li>
                                </ul>
                                <ul class="list" v-if="type == 2">
                                    <li
                                        @click="ChangeActive(item)"
                                        v-for="(item, index) in Notice"
                                        :key="index"
                                    >
                                        <i
                                            :style="
                                                item.noticeId == active
                                                    ? '    background-color: #F68920;'
                                                    : ''
                                            "
                                        ></i>
                                        <span
                                            :style="
                                                item.noticeId == active
                                                    ? ' color: #F68920;'
                                                    : ''
                                            "
                                            >{{ item.noticeTitle }}</span
                                        >
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="notice_details" v-if="detailsData">
                                <h1
                                    style="text-align: center; margin-top: 10px"
                                >
                                    {{ detailsData.noticeTitle || "" }}
                                </h1>
                                <h4 style="text-align: center; margin-top: 6px">
                                    时间：{{ detailsData.createTime || "" }}
                                </h4>
                                <div
                                    style="
                                        border-top: 3px solid #f0665e;
                                        width: 100%;
                                        height: 0px;
                                        margin-top: 10px;
                                    "
                                ></div>
                                <div
                                    style="

                                        padding: 10px;
                                    "
                                    v-html="changeNoticeContent(detailsData.noticeContent)"
                                ></div>
                                <el-row style="margin: 10px 0">
                                    <el-col :span="2"
                                        ><div class="grid-content bg-purple" style="margin-left: 10px;">
                                            附件：
                                        </div></el-col
                                    >
                                    <el-col :span="22">
                                        <div
                                            v-for="(
                                                item, index
                                            ) in detailsData.files"
                                            :key="index"
                                            @click="Download(item)"
                                            style="
                                                color: rgb(71, 135, 190);
                                                cursor: pointer;
                                            "
                                            class="grid-content bg-purple-light"
                                        >
                                            {{ item.fileName }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="suspension"
                :style="LoginStatus ? 'right: 0px;' : 'right: -800px;'"
            >
                <el-row
                    class="el-suspension"
                    style="
                        margin-top: calc(50% - 161px);
                        height: 322px;
                        width: 700px;
                        margin-left: 50px;
                    "
                >
                    <el-col :span="12">
                        <div class="BackgroundImg"></div>
                    </el-col>
                    <el-col
                        :span="12"
                        style="padding: 25px 25px 5px 25px; background: #fff"
                    >
                        <el-form
                            ref="loginForm"
                            :model="loginForm"
                            :rules="loginRules"
                            class="login-form"
                        >
                            <h3 class="title">成都市政务云</h3>
                            <el-form-item prop="username">
                                <el-input
                                    v-model="loginForm.username"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="账号"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="user"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    v-model="loginForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="密码"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="password"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input
                                    v-model="loginForm.code"
                                    auto-complete="off"
                                    placeholder="验证码"
                                    style="width: 63%"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="validCode"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                                <div class="login-code">
                                    <img
                                        :src="codeUrl"
                                        @click="getCode"
                                        class="login-code-img"
                                    />
                                </div>
                            </el-form-item>
                            <el-form-item style="width: 100%">
                                <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width: 100%"
                                    @click.native.prevent="handleLogin"
                                >
                                    <span v-if="!loading">登 录</span>
                                    <span v-else>登 录 中...</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { treeselect } from "@/api/system/dept";
import { getDicts } from "@/api/system/dict/data";
import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { helpList } from "@/api/system/user";
  import {
    getRouters
  } from "@/api/menu.js";
export default {
    data() {
        return {
            active: 0,
            type: 1,
            notice: [],
            Notice: [],
            loading: false,
            base_url: process.env.VUE_APP_BASE_API,
            detailsData: null,
            loginForm: {
                username: "", //test_cloud_manage
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "用户名不能为空",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "验证码不能为空",
                    },
                ],
            },
            productServiceTitleState: 0,
            LoginStatus: false,
            codeUrl: "",
            cookiePassword: "",
            redirect: undefined,
            list: [],
        };
    },
    created() {
        this.getCode();
        this.getCookie();
        if (this.$router.currentRoute.query.id) {
            this.GetOpennoticemylists(this.$router.currentRoute.query.id);
        } else {
            this.GetOpennoticemylist();
        }
        this.helpList();
    },
    methods: {
      helpList(){
        helpList({fileType:'工具上传',pageNum:1,pageSize:100000}).then(res=>{
          console.log(res,'xxxx')
          if(res.success){
            this.list=res.rows
          }
        })
      },
      down(url){
        window.open(this.base_url+url)
      },
        CancelLogin(){
            if(this.LoginStatus == true){
                this.LoginStatus = false
            }
        },
        Jump(){
            this.$router.push({path:'/login'}).catch((err)=>{
            });
        },
        Jumps(Path){
            this.$router.push({path:Path}).catch((err)=>{
            });
        },
        getCode() {
            getCodeImg().then((res) => {
                this.codeUrl = "data:image/gif;base64," + res.img;
                this.loginForm.uuid = res.uuid;
            });
        },
        chengeState() {
            this.LoginStatus = !this.LoginStatus;
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get("rememberMe");
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            };
        },
        getConfigure() {
            let configure = {
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
                dept: [], //部门列表树结构
            };
            //部门列表树结构
            treeselect({}).then((response) => {
                configure.dept = response.data;
            });
            //可用域
            getDicts("available_domain").then((response) => {
                configure.available_domain = response.data;
            });
            //服务商
            getDicts("cloud_service_provider").then((response) => {
                configure.cloud_service_provider = response.data;
            });
            //盘类型
            serviceByClazz({
                code: "cc",
            }).then((response) => {
                response.data.forEach((item) => {
                    if (
                        ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        configure.storage_type.push(item);
                    }
                    if (["spycc2"].indexOf(item.code) < 0) {
                        configure.ccList.push(item);
                    }
                    if (
                        ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        configure.fwcpList.push(item);
                    }
                });
            });
            //操作系统
            serviceByClazz({
                code: "czxt",
            }).then((response) => {
                configure.czxtList = response.data;
            });
            //云服务器规格列表
            listByCode("spec_ecs").then((response) => {
                configure.codeList = response.data;
            });
            //高性能服务器资源类型列表
            serviceByClazz({
                code: "wlfwq",
            }).then((response) => {
                configure.wlfwqList = response.data;
            });
            //数据库类型列表
            serviceByClazz({
                code: "sjk",
            }).then((response) => {
                configure.sjkList = response.data;
            });
            //安全产品列表
            serviceByClazz({
                code: "yyaq",
            }).then((response) => {
                configure.yyaqList = response.data;
            });
            setTimeout(() => {
                sessionStorage.setItem("configure", JSON.stringify(configure));
            }, 5000);
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set(
                            "password",
                            encrypt(this.loginForm.password),
                            { expires: 30 }
                        );
                        Cookies.set("rememberMe", this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove("rememberMe");
                    }
                    var loginForm
                    loginForm = JSON.parse(JSON.stringify(this.loginForm))
                    const Base64 = require('js-base64').Base64
                    var secret = ".m9xVBmvdvhiTO";
                    let password = loginForm.password + secret
                    let  r = Base64.encode(password);
                    loginForm.password = Base64.encode(r)
                    this.$store.dispatch("IsInsideFunction", true);
                   this.$store
                     .dispatch("Login", loginForm)
                     .then((res) => {
                       this.$router.push({
                         path: this.redirect || "/",
                       });
                     })
                     .catch(() => {
                       this.loading = false;
                       this.getCode();
                     });
                }
            });
        },
        changeNoticeContent(noticeContent){
         return noticeContent.replace(/<img/g,"<img style='max-width:100%'");
        },
        GetAppointNews(id) {
            axios
                .get(`${this.base_url}/system/notice/noToken/${id}`)
                .then((response) => {
                    // 普通
                    this.type = Number(response.data.data.noticeType);
                    this.active = response.data.data.noticeId;
                    this.detailsData = response.data.data;
                });
        },
        Download(item) {
            let downloadFile =
                this.base_url +
                "/system/downloadFile?fileName=" +
                item.fileName +
                "&filePath=" +
                item.filePath;
            window.location.href = downloadFile;
            return;
        },
        DefaultAssignment() {
            this.detailsData = this.notice[0];
            this.active = this.notice[0].noticeId;
        },
        ChangeType(number) {
            this.type = number;
        },
        ChangeActive(item) {
            this.active = item.noticeId;
            // this.detailsData = item;
            this.GetAppointNews(item.noticeId)
        },
        GetOpennoticemylist() {
            axios
                .get(`${this.base_url}/noToken/notice/mylist`, {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        noticeType: 1,
                    },
                })
                .then((response) => {
                    // 普通
                    this.notice = response.data.rows;
                    this.DefaultAssignment();
                });
            axios
                .get(`${this.base_url}/noToken/notice/mylist`, {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        noticeType: 2,
                    },
                })
                .then((response) => {
                    this.Notice = response.data.rows;
                });
        },
        GetOpennoticemylists(id) {
            axios
                .get(`${this.base_url}/noToken/notice/mylist`, {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        noticeType: 1,
                    },
                })
                .then((response) => {
                    // 普通
                    this.notice = response.data.rows;
                    this.GetAppointNews(id);
                });
            axios
                .get(`${this.base_url}/noToken/notice/mylist`, {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        noticeType: 2,
                    },
                })
                .then((response) => {
                    this.Notice = response.data.rows;
                    this.GetAppointNews(id);
                });
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.notification {
   // position: relative;
   overflow-y: none;
   padding-bottom: 40px;
   box-sizing: border-box;
   width: 100%;
   background: rgb(244,245,247);
   min-height: 100vh;
   min-width: 1344px;
   // min-min-width: 1344px;
   // width: 1920px;
    .backgrounds {
        width: 100%;
        overflow-y: none;
        // position: absolute;
        .nav {
           width: 100%;
           // width: 1920px;
           // height: 64px;
           position: absolute;
           z-index: 9;
           // min-width: 1060px;
           background: rgba($color: #000000, $alpha: 0.4);
           transition: 0.5s;
           // padding: 0 40px;
            .nav-inner {
                // width: 1200px;
                // min-width: 1080px;
                // height: 64px;
                margin: 0 auto;
                line-height: 64px;
                display: flex;
                justify-content: space-around;
                .nav-menu {
                    display: inline-block;
                    vertical-align: middle;
                }
                .clearfix {
                    zoom: 1;
                }
                ul.nav-menu > li,
                .nav-login > li {
                    float: left;
                }
                ul {
                    margin: 0;
                    padding: 0;
                    letter-spacing: 2px;
                }
                ul > li {
                    list-style-type: none;
                }
                ul.nav-menu div {
                    color: #fff;
                    display: inline-block;
                    height: 62px;
                    line-height: 62px;
                    vertical-align: middle;
                    margin: 0 15px;
                    font-size: 16px;
                    letter-spacing: 2px;
                    position: relative;
                }
                .nav-login {
                    float: right;
                    height: 64px;
                    .home-button {
                        display: inline-block;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        color: #fff;
                        border: 1px solid #fff;
                        margin: 15px 10px;
                        width: 90px;
                        font-size: 14px;
                        letter-spacing: 2px;
                        position: relative;
                        transition: all 0.3s;
                    }
                    .home-button:hover {
                        color: #000;
                    }
                    .home-button:hover:after {
                        width: 100%;
                    }
                    .home-button:after {
                        content: "";
                        position: absolute;
                        z-index: -9;
                        left: 0;
                        top: 0;
                        height: 100%;
                        width: 0;
                        background-color: #fff;
                        transition: all 0.3s;
                    }
                }
                ul.nav-menu > li:first-child div {
                    margin: 0 20px 0 0;
                    color: #fff;
                    font-size: 24px;
                }
            }
        }


        .nav:hover {
            background: rgba($color: #000000, $alpha: 0.8);
            cursor: pointer;
        }
        .carousel-inner {
            position: relative;
            width: 100%;
            .box {
                // width: 1920px;
                width: 100%;
                min-width: 1344px;
                height: 300px;
                margin: 0 auto;
                img {
                    margin-top: -320px;
                    // width: 1920px;
                    width: 100%;
                    min-width: 1344px;
                    height: 600px;
                }
            }
        }
        .suspension {
            position: fixed;
            box-sizing: border-box;
            height: 100vh;
            width: 800px;
            right: 0px;
            top: 0px;
            z-index: 999;
            background: rgba($color: #000000, $alpha: 0.8);
            transition: 0.5s ease-in;
            .el-suspension{
                background: url("../assets/icons/20210526170647.jpg") no-repeat;
                background-size: 100%;
                background-position: 60%;
                .BackgroundImg {
                    width: 100%;
                    height: 322px;
                    // background: url("../assets/icons/Data.png") no-repeat;
                    // background-size: 80%;
                    // background-position: 60%;
                    // background-color: #00f2fe;
                }
                // margin: 0 30px;
                .login-form {
                    border-radius: 6px;
                    // background: #ffffff;
                    width: 300px;
                    // margin-top: 50%;
                    // margin-left: 50px;
                    // padding: 25px 25px 5px 25px;
                    box-sizing: border-box;
                    .title{
                        margin: 0px auto 30px auto;
                        text-align: center;
                        color: #707070;
                    }
                    .el-input {
                        height: 38px;
                        input {
                            height: 38px;
                        }
                    }
                    .input-icon {
                        height: 39px;
                        width: 14px;
                        margin-left: 2px;
                    }
                }
            }
            .login-tip {
                font-size: 13px;
                text-align: center;
                color: #bfbfbf;
            }
            .login-code {
                width: 33%;
                height: 38px;
                float: right;
                img {
                    cursor: pointer;
                    vertical-align: middle;
                }
            }
        }
        .notice {
            background-color: #f4f5f7;
            // overflow: hidden;
            margin: 40px 0;
            .content {
                box-sizing: border-box;
                width: 1200px;
                margin: 20px auto 40px auto;
                background-color: #fff;
                .container-fluid {
                    padding-left: 15px;
                    padding-right: 15px;
                    margin-bottom: 20px;
                    display: flex;
                    background-color: #f4f5f7;
                    .col-md-4 {
                        box-sizing: border-box;
                        width: 33.33333333%;
                        padding-left: 0;
                        margin-right: 15px;
                        background-color: #fff;
                        min-height: 550px;
                        .container-fluid {
                            width: 100%;
                            box-sizing: border-box;
                            background-color: #fff;
                            overflow: hidden;
                            display: flex;
                            div {
                                padding: 0 15px;
                                height: 45px;
                                line-height: 45px;
                                text-align: center;
                                border: 1px solid #ddd;
                                margin-bottom: 0;
                                cursor: pointer;
                            }
                        }
                        .leftContent {
                            background-color: #fff;
                            overflow: hidden;
                            padding-left: 15px;
                            .list {
                                margin: 0;
                                padding: 0;
                                li {
                                    cursor: pointer;
                                    position: relative;
                                    height: 26px;
                                    i {
                                        display: inline-block;
                                        width: 8px;
                                        height: 8px;
                                        background-color: #efefef;
                                        border-radius: 5px;
                                        position: absolute;
                                        top: 9px;
                                        left: 0;
                                    }
                                    span {
                                        display: inline-block;
                                        height: 26px;
                                        line-height: 26px;
                                        width: 90%;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        color: #383a39;
                                        margin-left: 20px;
                                    }
                                }
                            }
                            ul,
                            li {
                                list-style: none;
                            }
                        }
                    }
                    .col-md-8 {
                        width: 66.66666667%;
                        padding-left: 0;
                        background-color: #fff;
                        .notice_details {
                            padding: 0 15px 15px;
                            div{
                                p{
                                    img{
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
